/*
  实现兄弟组件通信
  需求：能够让妻子花老公的钱
  1.把丈夫的state挪到index组件中
  2.通过父传子，将money传递给丈夫组件丈夫Husband组件
  3.通过this.props访问money
  4.子传父给丈夫Husband组件：父组件内定义一个赚钱的方法
  5.将方法传递子组件，子组件负责调用
  6.子传父给老婆组件Wife：定义一个花钱的方法
  
*/

// 导入react和react-dom
import React from 'react';
import ReactDom from 'react-dom/client';
import Husband from './components/Husband';
import Wife from './components/Wife';

class Handler extends React.Component {
  state = {
    money: 20000,
  };
  // 老公赚钱方法
  handleMakeMoney = () => {
    this.setState({
      money: this.state.money + 1000,
    });
  };
  // 老婆组件方法
  handleCost = (num) => {
    console.log('num----->', num);
    this.setState({
      money: this.state.money - num,
    });
  };
  render() {
    return (
      <div>
        <h3>家庭存款：{this.state.money}</h3>
        {/* 通过父传子，将money传递给丈夫组件Husband */}
        <Husband
          money={this.state.money}
          handleMakeMoney={this.handleMakeMoney}
        ></Husband>
        {/* 老婆组件传递过来的方法 */}
        <Wife handleCost={this.handleCost}></Wife>
      </div>
    );
  }
}

// 18版本以上新出的挂载方法
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(<Handler></Handler>);
